<template>
    <div class="photo-text-wrap">
        <div :class="{'img-wrap-left': from=='right', 'img-wrap-right': from == 'left'}">
            <img :src="url"/>
        </div>
        <div class="text-wrap" :class="{'text-wrap-left': from=='right', 'text-wrap-right': from == 'left'}">
            <div class="title" v-if="title">
                <span>{{title}}</span>
            </div>
            <div class="strong-title" v-if="strongTitle">
                <strong>
                    <span>{{strongTitle}}</span>
                </strong>
            </div>
            <div class="content" v-if="content">
                <span>{{content}}</span>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</template>

<script>
export default {
    name: 'photoText',
    props: {
        "url": String, 
        "title": String,
        "strongTitle":String,
        "content": String,
        "from": {
            // 文字出现的方向， 从右边出现图片在左边
            type: String,
            default: "right",
            validator: value => ["right", "left"].indexOf(value) > -1
        }
    },
    mounted() {
        var thisComponent = this;
        $(window).scroll(function() {
            slideIn($(".text-wrap", thisComponent.$el));
        })

        function slideIn(obj) {
            var targetHeight = obj.offset().top;
            var scrollTop = $(window).scrollTop();
            var thisComponentHeight = thisComponent.$el.offsetHeight;
            var objHeight = obj.height();
            if(scrollTop > targetHeight - thisComponentHeight + objHeight) {
                var style = (thisComponent.from == "right") ? {left: "50%"} : {right: "50%"};
                obj.animate(style, 1000);
                setTimeout(function() {
                    obj.stop();
                }, 1000)
            }
        }
    }
}
</script>

<style lang="scss">
@import "../style/photo-text";
</style>

